<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/bootstrap.css' />" >
    <link rel="stylesheet" type="text/css" href="../assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/jquery-ui.css' />" >
    <script src="../assets/js/lib/jquery-1.8.2.min.js"></script>
    <script src="../assets/js/create.js"></script>
    <script src="../assets/js/lib/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="../assets/js/lib/bootstrap.min.js"></script>
    <title>Create EMR Clusters</title>
</head>
<body>
    <%@ include file="../../menu.html" %>
    <div class="row-fluid">
        <div class="span3">
        </div>
        <div class="span6 body-content-create">
            <form name="creationForm" id="creationForm" action="/emr/create.do" method="POST">
                <legend>Cluster Settings</legend>
                <div class="row-fluid">
                    <label for="jobName" class="span3 text-right">Job Name</label>
                    <div class="span9">
                        <input type="text" id="jobName" name="jobName" type="text"></input>
                    </div>
                </div>
                <div class="row-fluid">
                    <label for="numberOfInstances" class="span3 text-right">Number of Instances</label>
                    <div class="span9">
                        <input type="text" id="numberOfInstances" name="numberOfInstances" type="number" value="1" readonly='readonly'>
                            <i class="icon-plus-sign cursor-style"></i>
                            <i class="icon-minus-sign cursor-style"></i>
                        </input>
                    </div>
                </div>
                <div id="masterTypes" class="row-fluid">
                    <label for="masterType" class="span3 text-right">Master Type</label>
                    <div class="span9">
                        <select id="masterType" name="masterType">
                            <c:forEach var="type1" items="${instanceTypes}">
                                <option>
                                    ${type1}
                                </option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div id="slaveTypes" class="row-fluid hide">
                    <label for="slaveType" class="span3 text-right">Slave Type</label>
                    <div class="span9">
                        <select id="slaveType" name="slaveType">
                            <c:forEach var="type2" items="${instanceTypes}">
                                <option>
                                    ${type2}
                                </option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3 text-right">
                        Keep alive
                    </div>
                    <div class="span9">
                        <label class="checkbox">
                          <input type="checkbox" disabled='disabled' checked>
                        </label>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3 text-right">
                        Big data tools
                    </div>
                    <div class="span6" id="bdtools">
                        <label class="checkbox inline">
                          <input type="checkbox" id="pig" name="pig" value="pig"> Pig
                        </label>
                        <label class="checkbox inline">
                          <input type="checkbox" id="hive" name="hive" value="hive"> Hive
                        </label>
                    </div>
                    <span id="bdt-error" class="span3 hide">At least one must be selected</span>
                </div>
                <legend></legend>
                <div class="row-fluid">
                    <label for="bootstrapAction" class="span3 text-right">Bootstrap action</label>
                    <div class="span9">
                        <input type="text" readonly='readonly' id="bootstrapAction" name="bootstrapAction" type="text" value="s3://globant-emr/tag_emr_instance.sh">
                    </div>
                </div>
                <div class="row-fluid">
                    <label for="logPath" class="span3 text-right">Log Path</label>
                    <div class="span9">
                        <input type="text" readonly='readonly' id="logPath" name="logPath" type="text" value="s3://globant-emr">
                    </div>
                </div>
                <div class="row-fluid">
                    <label for="arguments" class="span3 text-right">Arguments</label>
                    <div class="span9">
                        <textarea rows="3" readonly='readonly' name='arguments'>--aws-credentials=s3://globant-emr/aws_credentials.sh Opco=KI Service=Test Cartesis=KI Environment=POC Username=Irfan.Sabir GST=Matt.Glace</textarea>
                    </div>
                </div>
                <div class="row-fluid">
                    <button type="submit" class="btn btn-default">Create</button>
                </div>
            </form>
        </div>
    </div>
    <div id="modal_error" title="Error">
        <div class="msg"></div>
    </div>
</body>
</html>
